<template>
    <div class="block">
        <p>商品分类</p>
        <el-dialog title="分类信息" :visible.sync="dialogFormVisible"  @close="clearFormData">
            <el-form :model="form">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类品牌" :label-width="formLabelWidth">
                    <el-select v-model="currentBrand" placeholder="请选择"  value-key="id">
                        <el-option
                                v-for="item in brands"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                        <p v-for="brand in form.selectedBrands">{{brand.name}}</p>
                    <el-button size="mini" @click="choiceBrand">添加品牌</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCategory">确 定</el-button>
            </div>
        </el-dialog>
        <el-tree
                :data="data"
                node-key="id"
                @node-click="clickCategory"
                default-expand-all
                :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
            Append
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
        </el-tree>
    </div>
</template>

<script>
    let id = 1000;
    export default {
        name: "Category",
        data() {
            return {
                data: [],   // 树的节点数据
                form: {id: 0, name: '', parentId: 0, isParent: 0, selectedBrands:[]},
                dialogFormVisible: false,
                formLabelWidth: '120px',
                brands: [],
                currentBrand: {id:0, name:""},//当前选择的品牌
                   //已经选择的品牌加入到form里面去了，一起传送给后台
                categoryData:{}
            }
        },
        methods: {
            //加载所有的品牌
            loadBrand() {
                this.$http.get("http://api.blb.com/api/goods-api/brand")
                    .then(res => {
                        if (res.data.code == 1) {
                            this.brands = res.data.data;
                        }
                    })
            },
            //从下拉菜单中选择品牌
            choiceBrand() {
                // 把当前选择的品牌放入品牌数组中
                this.form.selectedBrands.push(this.currentBrand);
            },
            // 根据父分类加载子分类
            loadCategory(pid) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + pid)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.data = res.data.data;
                        }
                    })
            },
            //点击父分类后加载子分类，data相当于子节点的数据
            clickCategory(data) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + data.id)
                    .then(res => {
                        if (res.data.code == 1) {
                            //给当前节点加children属性
                            this.$set(data, 'children', res.data.data)
                        }
                    })
            },
            append(data) {
                this.form.parentId = data.id;
                this.dialogFormVisible = true;
                // 把当前的树节点的数据保存起来
                this.categoryData=data;
                // const newChild = {id: id++, label: 'testtest', children: []};
                // if (!data.children) {
                //     this.$set(data, 'children', []);
                // }
                // data.children.push(newChild);
            },
            // 将选中的品牌保存到数据库
            saveCategory(){
                this.$http.post("http://api.blb.com/api/goods-api/category",this.form)
                    .then(res=>{
                        if (res.data.code==1){
                           if (!this.categoryData.children){
                              this.$set(this.categoryData,'children',[])
                           }
                           this.categoryData.push(res.data.data);
                        }
                    });
                this.$message.success("添加分类成功");
                this.dialogFormVisible=false;
            },

            remove(node, data) {
                // const parent = node.parent;
                // const children = parent.data.children || parent.data;
                // const index = children.findIndex(d => d.id === data.id);
                // children.splice(index, 1);
                this.$http.delete("http://api.blb.com/api/goods-api/category/"+data.id)
                    .then(res=>{
                        if (res.data.code==1){
                            this.$message.success("删除分类成功");
                        }
                    })

            },
            // 清空数据
            clearFormData() {
                this.form = {id: 0, name: '', parentId: 0, isParent: 0, selectedBrands:[]};
            }
        },
        mounted() {
            this.loadCategory(0);   //先加载第一级
            this.loadBrand();  //加载所有的品牌
        }
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>